<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
		<!--ios是否运行创建快捷启动方式-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<!--ios顶部通知栏的样式 黑色-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<!--遇到数字不让转成电话号码格式-->
		<meta content="telephone=no" name="format-detection">
		<title>平台微店</title>
		<link rel="stylesheet" href="assets/mui/css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="common/css/base.css" />
		<style type="text/css">
			.top {
				width: 100%;
				height: 0.88rem;
				background-color: white;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 0.22rem;
				box-sizing: border-box;
			}
			
			.top .top-one {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			
			.top .top-one>span:first-child {
				display: inline-block;
				width: 0.38rem;
				height: 0.45rem;
			}
			
			.top .top-two {
				width: 5.1rem;
				height: 0.6rem;
				border: 1px solid #ccc;
				border-radius: 0.1rem;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 0.12rem;
				box-sizing: border-box;
			}
			
			.top .top-two span:first-child {
				display: inline-block;
				width: 0.4rem;
				height: 0.4rem;
			}
			
			.top .top-two>input {
				font-size: 0.28rem;
				margin-left: 0.1rem;
				color: #CCCCCC;
				padding: 0;
				margin: 0;
				text-align: left;
				background-color: white;
				height: 0.4rem;
				height: 0.4rem;
				padding-left: 0.1rem;
			}
			
			.top div:nth-child(3) {
				width: 0.6rem;
				height: 0.2rem;
			}
			
			.contain {
				width: 100%;
				height: 100%;
			}
			
			.shop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #ccc;
				padding: 0.2rem 0.2rem;
				box-sizing: border-box;
				background-color: white;
			}
			
			.shop div:first-child {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 50%;
				font-size: 0.32rem;
			}
			
			.shop div:first-child>span:first-child {
				width: 0.6rem;
				height: 0.6rem;
				display: inline-block;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 0.2rem;
			}
			
			.shop div:first-child span img {
				width: 100%;
			}
			
			.shop>#togo {
				width: 5%;
			}
		</style>
	</head>

	<body>
		<!--返回-->
		<div id="app">

			<!--顶部-->
			<div class="top">
				<div class="top-one" onClick="javascript :history.back(-1);">
					<span><img src="img/right.png"/></span>
				</div>

				<form class="top-two" onsubmit="return false;">
					<span><img src="img/search.png"/></span>
					<input type="search" placeholder="请输入商店名称" id="myInput" @keypress="searchGoods" />
				</form>

				<div style="opacity: 0;">
					<img src="img/3point.png" />
				</div>
			</div>

			<div class="mui-scroll-wrapper" style="margin-top: 1rem;">
				<div class="mui-scroll">
					<div class="contain">
						<div class="shop" v-for="(item,index) in list" :key="item.user_id" >
							<div @tap="userShopTo(item.user_uuid)">
								<span>
								<img :src="item.user_img" />
								</span>
								<span>{{item.user_name}}</span>
							</div>
							<img id="togo" src="img/left.png" alt="" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/jquery-3.1.0.min.js"></script>
		<script src="assets/artTemplate/template-native.js"></script>
		<script src="js/remstyle.js"></script>
		<script src="common/js/common.js"></script>
		<script src="assets/mui/js/mui.min.js"></script>
		<script src="common/js/header.js"></script>
		<script src="js/vue.js"></script>
		<script>
		if(getCookieValue("token")==""){
		window.location.href = 'l-userlogin.html'
	}
		
		
			let vm = new Vue({
				el: '#app',
				data: {
					list: [],
					listContain: [],
					page: 1,
				},
				created() {
					var that = this;
					that.userShop();
					mui.init({
						pullRefresh: {
							container: '.mui-scroll-wrapper', //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
							up: {
								callback: function() {
									that.page++;
									that.userShop();
									if(that.listContain.length) {
										this.endPullupToRefresh();
									} else {
										this.endPullupToRefresh(true);
									}
								}
							}
						}
					});
				},
				mounted() {

				},
				methods: {
					userShop() {
						var that = this;
						mui.ajax(window.address + '/sysuser/listBusiness', {
							data: {
								"page": that.page,
								"rows": 10
							},
							dataType: 'json',
							type: 'get',
							success: function(data) {
								that.listContain = data.data;
								for(var i = 0; i < data.data.length; i++) {
									that.list.push(data.data[i]);
								}
								console.log(that.list);
							}
						})
					},
					userShopTo(id) {
						window.location.href = 'v-shop.html?business=' + id;
					},
					searchGoods(event) {
						if(event.keyCode == 13) { //如果按的是enter键 13是enter 
							event.preventDefault(); //禁止默认事件（默认是换行） 
							var keyWord = event.target.value;
							var t = encodeURI(encodeURI(keyWord));
							window.location.href = 'v-store-shop-search.html?key=' + t;
						}
					}

				}
			});
		</script>
	</body>

</html>